{% extends "app/base_site.html" %}

{% block title %} 用户管理 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
<style>
    .xc_user-container {
        /*background: #f5f7fa;*/
    }
    
    .xc_modern-card {
        background: white;
        border-radius: 6px;
        padding: 10px 14px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        margin-bottom: 12px;
    }
    
    .xc_page-header {
        display: flex;
        justify-content: flex-start !important;
        align-items: center;
        padding: 4px 0;
        margin-bottom: 8px;
        min-height: 32px;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .xc_page-title {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 400;
        flex-shrink: 0;
    }
    
    .xc_page-title i {
        margin-right: 6px;
        font-size: 16px;
        color: #3b82f6;
    }
    
    .xc_header-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .xc_header-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }
    
    .xc_loading-spinner {
        display: inline-block;
        width: 12px;
        height: 12px;
        border: 2px solid #e5e7eb;
        border-top: 2px solid #3b82f6;
        border-radius: 50%;
        animation: xc_spin 1s linear infinite;
        margin-right: 5px;
    }
    
    @keyframes xc_spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .xc_loading-text {
        color: #6b7280;
        font-size: 12px;
    }
    
    .xc_btn-modern {
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 400;
        border-radius: 3px;
        border: 1px solid #d1d5db;
        background: white;
        color: #374151;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        text-decoration: none;
    }
    
    .xc_btn-modern:hover {
        background: #f9fafb;
        border-color: #3b82f6;
        color: #3b82f6;
    }
    
    .xc_btn-secondary {
        background: white;
        color: #6b7280;
        border: 1px solid #d1d5db;
    }
    
    .xc_btn-secondary:hover {
        background: #f9fafb;
        color: #374151;
        border-color: #9ca3af;
    }

    .xc_table-container {
        overflow-x: auto;
        border-radius: 6px;
        border: 1px solid #e5e7eb;
    }
    
    .xc_table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
    }
    
    .xc_table-header {
        background: #fafafa;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .xc_table-header th {
        padding: 10px 12px;
        text-align: left;
        font-weight: 500;
        color: #374151;
        font-size: 12px;
        white-space: nowrap;
    }
    
    .xc_table-body tr {
        border-bottom: 1px solid #f3f4f6;
        transition: background 0.2s;
    }
    
    .xc_table-body tr:last-child {
        border-bottom: none;
    }
    
    .xc_table-body tr:hover {
        background: #f9fafb;
    }
    
    .xc_table-body td {
        padding: 10px 12px;
        color: #374151;
        vertical-align: middle;
    }
    
    .xc_user-id {
        display: inline-block;
        padding: 2px 6px;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-radius: 3px;
        font-size: 11px;
        color: #6b7280;
        font-family: monospace;
    }
    
    .xc_user-name {
        font-weight: 500;
        color: #374151;
    }
    
    .xc_badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: 500;
    }
    
    .xc_badge-success {
        background: #e0f2fe;
        color: #0369a1;
    }
    
    .xc_badge-warning {
        background: #fef3c7;
        color: #b45309;
    }
    
    .xc_badge-danger {
        background: #fee2e2;
        color: #991b1b;
    }
    
    .xc_badge-info {
        background: #e0f2fe;
        color: #0369a1;
    }
    
    .xc_status-active {
        color: #059669;
        font-weight: 500;
    }
    
    .xc_status-inactive {
        color: #dc2626;
        font-weight: 500;
    }
    
    .xc_actions {
        display: flex;
        gap: 4px;
    }
    
    .xc_btn-icon {
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 3px;
        border: 1px solid #d1d5db;
        background: white;
        color: #374151;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        text-decoration: none;
    }
    
    .xc_btn-icon:hover {
        background: #f9fafb;
        border-color: #3b82f6;
        color: #3b82f6;
    }
    
    .xc_btn-icon.delete:hover {
        border-color: #ef4444;
        color: #ef4444;
    }
    
    .xc_pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 16px 0;
        background: white;
        border-radius: 6px;
    }
    
    .xc_page-btn {
        min-width: 36px;
        height: 36px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #d1d5db;
        background: white;
        color: #6b7280;
        border-radius: 5px;
        cursor: pointer;
        font-size: 13px;
        transition: all 0.2s;
        text-decoration: none;
    }
    
    .xc_page-btn:hover:not(.active) {
        border-color: #3b82f6;
        color: #3b82f6;
    }
    
    .xc_page-btn.active {
        background: #3b82f6;
        color: white;
        border-color: #3b82f6;
    }
    
    .xc_page-info {
        font-size: 13px;
        color: #9ca3af;
        margin: 0 8px;
    }
    
    .xc_empty-state {
        text-align: center;
        padding: 80px 20px;
        color: #9ca3af;
    }
    
    .xc_empty-state i {
        font-size: 64px;
        color: #d1d5db;
        margin-bottom: 16px;
    }
    
    .xc_empty-state p {
        font-size: 14px;
        margin: 0;
    }
    
    /* 弹窗样式 */
    .xc_modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }
    
    .xc_modal-overlay.active {
        display: block;
        animation: xc_fadeIn 0.2s ease;
    }
    
    @keyframes xc_fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .xc_modal-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        border-radius: 8px;
        width: 90%;
        max-width: 650px;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        animation: xc_slideIn 0.3s ease;
    }
    
    @keyframes xc_slideIn {
        from {
            transform: translate(-50%, -48%);
            opacity: 0;
        }
        to {
            transform: translate(-50%, -50%);
            opacity: 1;
        }
    }
    
    .xc_modal-header {
        position: relative;
        padding: 14px 18px;
        border-bottom: 1px solid #e5e7eb;
        background: #fafafa;
        border-radius: 8px 8px 0 0;
    }
    
    .xc_modal-title {
        font-size: 16px;
        font-weight: 500;
        color: #374151;
    }
    
    .xc_modal-close {
        position: absolute;
        top: 12px;
        right: 16px;
        width: 30px;
        height: 30px;
        border: none;
        background: white;
        color: #6b7280;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        border-radius: 4px;
        border: 1px solid #d1d5db;
        transition: all 0.2s;
    }
    
    .xc_modal-close:hover {
        background: #f3f4f6;
        color: #374151;
        border-color: #9ca3af;
    }
    
    .xc_modal-body {
        flex: 1;
        padding: 18px 20px;
        overflow-y: auto;
    }
    
    .xc_form-group {
        margin-bottom: 14px;
    }
    
    .xc_form-label {
        display: block;
        font-size: 13px;
        color: #374151;
        margin-bottom: 6px;
        font-weight: 500;
    }
    
    .xc_form-label .required {
        color: #ef4444;
        margin-left: 2px;
    }
    
    .xc_form-input {
        width: 100%;
        padding: 8px 12px;
        font-size: 13px;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        background: white;
        color: #374151;
        transition: all 0.2s;
        height: 36px;
    }
    
    .xc_form-input:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }
    
    .xc_form-input:disabled {
        background: #f9fafb;
        color: #9ca3af;
        cursor: not-allowed;
    }
    
    .xc_radio-group {
        display: flex;
        gap: 16px;
    }
    
    .xc_radio-item {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .xc_radio-item input[type="radio"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }
    
    .xc_radio-item label {
        font-size: 13px;
        color: #374151;
        cursor: pointer;
        margin: 0;
    }
    
    .xc_modal-footer {
        padding: 14px 18px;
        border-top: 1px solid #e5e7eb;
        text-align: right;
        background: #fafafa;
        border-radius: 0 0 8px 8px;
    }
    
    .xc_modal-btn {
        padding: 7px 18px;
        font-size: 13px;
        border-radius: 4px;
        border: 1px solid #d1d5db;
        cursor: pointer;
        margin-left: 10px;
        transition: all 0.2s;
        font-weight: 400;
        background: white;
        color: #374151;
    }
    
    .xc_modal-btn:hover {
        background: #f9fafb;
        border-color: #9ca3af;
    }
    
    .xc_modal-btn-primary {
        background: #3b82f6;
        color: white;
        border-color: #3b82f6;
    }
    
    .xc_modal-btn-primary:hover {
        background: #2563eb;
        border-color: #2563eb;
    }
    
    .xc_password-hint {
        font-size: 12px;
        color: #9ca3af;
        margin-top: 4px;
    }
    
    .right_col {
        background: #f5f7fa !important;
    }
    
    @media (max-width: 1200px) {
        .xc_btn-modern {
            padding: 3px 8px;
            font-size: 11px;
        }
    }
    
    @media (max-width: 768px) {
        .xc_page-header {
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .xc_header-right {
            width: 100%;
            justify-content: flex-start;
        }
        
        .xc_table-container {
            overflow-x: scroll;
        }
    }
    
    /* 权限管理样式 */
    .xc_perm-item {
        display: flex;
        align-items: center;
        padding: 6px 8px;
        margin-bottom: 4px;
        border: 1px solid #e5e7eb;
        border-radius: 3px;
        background: white;
        transition: all 0.2s;
    }
    
    .xc_perm-item:hover {
        background: #f0f9ff;
        border-color: #3b82f6;
    }
    
    .xc_perm-checkbox {
        margin-right: 8px;
        width: 16px;
        height: 16px;
        cursor: pointer;
    }
    
    .xc_perm-info {
        flex: 1;
    }
    
    .xc_perm-name {
        font-size: 12px;
        color: #374151;
        font-weight: 500;
        display: block;
    }
    
    .xc_perm-codename {
        font-size: 11px;
        color: #9ca3af;
        font-family: monospace;
        margin-top: 2px;
        display: block;
    }
    
    .xc_perm-category {
        font-size: 12px;
        font-weight: 500;
        color: #374151;
        padding: 6px 8px;
        background: #f3f4f6;
        border-radius: 3px;
        margin: 8px 0 4px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .xc_perm-category-actions {
        display: flex;
        gap: 8px;
        font-size: 11px;
        font-weight: normal;
    }
    
    .xc_perm-category-actions a {
        color: #3b82f6;
        cursor: pointer;
        text-decoration: none;
    }
    
    .xc_perm-category-actions a:hover {
        text-decoration: underline;
    }
    
    /* 穿梭框样式 */
    .xc_transfer-container {
        display: flex;
        gap: 12px;
        align-items: stretch;
        height: 360px;
    }
    
    .xc_transfer-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        border: 1px solid #e5e7eb;
        border-radius: 4px;
        background: white;
        overflow: hidden;
    }
    
    .xc_transfer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        font-size: 12px;
        font-weight: 500;
        color: #374151;
    }
    
    .xc_transfer-header label {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        cursor: pointer;
    }
    
    .xc_transfer-header input[type="checkbox"] {
        width: 14px;
        height: 14px;
        cursor: pointer;
    }
    
    .xc_transfer-count {
        font-size: 11px;
        color: #6b7280;
        background: #e5e7eb;
        padding: 2px 6px;
        border-radius: 10px;
    }
    
    .xc_transfer-body {
        flex: 1;
        overflow-y: auto;
        padding: 8px;
        background: #fafafa;
    }
    
    .xc_transfer-item {
        display: flex;
        align-items: center;
        padding: 6px 8px;
        margin-bottom: 4px;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 3px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .xc_transfer-item:hover {
        background: #f0f9ff;
        border-color: #3b82f6;
    }
    
    .xc_transfer-item.selected {
        background: #e0f2fe;
        border-color: #0ea5e9;
    }
    
    .xc_transfer-item input[type="checkbox"] {
        margin-right: 8px;
        width: 14px;
        height: 14px;
        cursor: pointer;
    }
    
    .xc_transfer-item-content {
        flex: 1;
        min-width: 0;
    }
    
    .xc_transfer-item-name {
        font-size: 12px;
        color: #374151;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .xc_transfer-item-code {
        font-size: 10px;
        color: #9ca3af;
        font-family: monospace;
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .xc_transfer-item-model {
        font-size: 10px;
        color: #3b82f6;
        background: #eff6ff;
        padding: 1px 4px;
        border-radius: 2px;
        margin-left: 4px;
    }
    
    .xc_transfer-actions {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        padding: 0 4px;
    }
    
    .xc_transfer-btn {
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid #d1d5db;
        background: white;
        border-radius: 3px;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6b7280;
        font-size: 14px;
    }
    
    .xc_transfer-btn:hover {
        background: #3b82f6;
        border-color: #3b82f6;
        color: white;
    }
    
    .xc_transfer-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #9ca3af;
    }
    
    .xc_transfer-empty i {
        font-size: 48px;
        margin-bottom: 8px;
        color: #d1d5db;
    }
    
    .xc_transfer-empty p {
        font-size: 12px;
        margin: 0;
    }
</style>
{% endblock stylesheets %}

{% block content %}
<div class="right_col" role="main">
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <!-- xc page start -->
                <div class="xc_user-container">
                    <div class="xc_modern-card">
                        <div class="xc_page-header">
                            <div class="xc_page-title">
                                <i class="fa fa-users"></i>
                                用户管理
                            </div>
                            <div class="xc_header-actions">
                                <button class="xc_btn-modern xc_btn-secondary" onclick="openAddModal()">
                                    <i class="fa fa-plus"></i> 添加
                                </button>
                                <button class="xc_btn-modern xc_btn-secondary" onclick="f_reload()">
                                    <i class="fa fa-refresh"></i> 刷新
                                </button>
                            </div>
                            <div>
                                <span id="top_loading" style="display: none;">
                                    <span class="xc_loading-spinner"></span>
                                    <span class="xc_loading-text">加载中...</span>
                                </span>
                                <span id="top_msg">{{top_msg}}</span>
                            </div>
                        </div>

                        <div class="xc_table-container">
                            <table class="xc_table">
                                <thead class="xc_table-header">
                                    <tr>
                                        <th>ID</th>
                                        <th>用户名</th>
                                        <th>邮箱</th>
                                        <th>角色</th>
                                        <th>状态</th>
                                        <th>加入时间</th>
                                        <th>上次登录</th>
                                        <th style="text-align: center;">操作</th>
                                    </tr>
                                </thead>
                                <tbody class="xc_table-body">
                                    {%  for d  in data %}
                                    <tr>
                                        <td><span class="xc_user-id">{{ d.id }}</span></td>
                                        <td><span class="xc_user-name">{{ d.username }}</span></td>
                                        <td>{{ d.email }}</td>
                                        <td>
                                            {% if d.is_superuser == 1 %}
                                            <span>超级管理员</span>
                                            {% else %}
                                            <span>普通用户</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if d.is_active == 1 %}
                                            <span class="xc_status-active">● 正常</span>
                                            {% else %}
                                            <span class="xc_status-inactive">● 禁用</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ d.date_joined }}</td>
                                        <td>{{ d.last_login }}</td>
                                        <td>
                                            <div class="xc_actions">
                                                <button onclick="openEditModal('{{ d.id }}')" class="xc_btn-icon">
                                                    <i class="fa fa-edit"></i> 编辑
                                                </button>
                                                {% if d.is_superuser != 1 %}
                                                <button onclick="openPermissionModal('{{ d.id }}', '{{ d.username }}')" class="xc_btn-icon">
                                                    <i class="fa fa-key"></i> 权限
                                                </button>
                                                {% endif %}
                                                <button onclick="f_del('{{ d.id }}')" class="xc_btn-icon delete">
                                                    <i class="fa fa-trash"></i> 删除
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            
                            {% if data|length == 0 %}
                            <div class="xc_empty-state">
                                <i class="fa fa-users"></i>
                                <p>暂无用户数据</p>
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="xc_pagination">
                        <span class="xc_page-info">共 {{ pageData.page_num }} 页 / {{ pageData.count }} 条</span>
                        {%  for d  in pageData.pageLabels%}
                          {% if d.cur == 1 %}
                            <div class="xc_page-btn active">{{ d.name }}</div>
                          {% else %}
                            <a href="/user/index?p={{d.page}}&ps={{pageData.page_size}}" class="xc_page-btn">{{ d.name }}</a>
                          {% endif %}
                        {% endfor %}
                    </div>
                </div>
                <!-- xc page end -->
            </div>
        </div>
    </div>
</div>

<!-- 用户添加/编辑弹窗 -->
<div class="xc_modal-overlay" id="userModal">
    <div class="xc_modal-container">
        <div class="xc_modal-header">
            <div class="xc_modal-title" id="modalTitle">添加用户</div>
            <button class="xc_modal-close" onclick="closeUserModal()">×</button>
        </div>
        <div class="xc_modal-body">
            <div class="xc_form-group">
                <label class="xc_form-label">用户名<span class="required">*</span></label>
                <input type="text" id="input_username" class="xc_form-input" placeholder="请输入用户名">
            </div>
            
            <div class="xc_form-group">
                <label class="xc_form-label">邮箱<span class="required">*</span></label>
                <input type="email" id="input_email" class="xc_form-input" placeholder="请输入邮箱地址">
            </div>
            
            <div class="xc_form-group" id="password_group">
                <label class="xc_form-label">密码<span class="required">*</span></label>
                <input type="password" id="input_password" class="xc_form-input" placeholder="6-16位密码">
                <div class="xc_password-hint">密码长度须为6-16位</div>
            </div>
            
            <div class="xc_form-group" id="new_password_group" style="display: none;">
                <label class="xc_form-label">新密码</label>
                <input type="password" id="input_new_password" class="xc_form-input" placeholder="不修改请留空">
                <div class="xc_password-hint">不修改密码请留空</div>
            </div>
            
            <div class="xc_form-group" id="re_password_group" style="display: none;">
                <label class="xc_form-label">确认新密码</label>
                <input type="password" id="input_re_password" class="xc_form-input" placeholder="再次输入新密码">
            </div>
            
            <div class="xc_form-group">
                <label class="xc_form-label">状态<span class="required">*</span></label>
                <div class="xc_radio-group">
                    <div class="xc_radio-item">
                        <input type="radio" id="status_active" name="is_active" value="1" checked>
                        <label for="status_active">正常</label>
                    </div>
                    <div class="xc_radio-item">
                        <input type="radio" id="status_inactive" name="is_active" value="0">
                        <label for="status_inactive">禁用</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="xc_modal-footer">
            <button class="xc_modal-btn" onclick="closeUserModal()">取消</button>
            <button class="xc_modal-btn xc_modal-btn-primary" onclick="submitUserForm()">
                <span id="submit_text">提交</span>
            </button>
        </div>
    </div>
</div>

<!-- 权限管理弹窗 -->
<div class="xc_modal-overlay" id="permissionModal">
    <div class="xc_modal-container" style="max-width: 850px; max-height: 600px;">
        <div class="xc_modal-header">
            <div class="xc_modal-title" id="permissionModalTitle">用户权限管理</div>
            <button class="xc_modal-close" onclick="closePermissionModal()">×</button>
        </div>
        <div class="xc_modal-body" style="padding: 16px;">
            <div class="xc_form-group" style="margin-bottom: 12px;">
                <label class="xc_form-label">用户名</label>
                <input type="text" id="perm_username" class="xc_form-input" disabled style="background: #f9fafb;">
            </div>
            
            <!-- 搜索框 -->
            <div class="xc_form-group" style="margin-bottom: 12px;">
                <input type="text" id="perm_search" class="xc_form-input" placeholder="🔍 搜索权限名称或代码..." style="padding-left: 10px;">
            </div>
            
            <!-- 穿梭框容器 -->
            <div class="xc_transfer-container">
                <!-- 可用权限 -->
                <div class="xc_transfer-panel">
                    <div class="xc_transfer-header">
                        <label>
                            <input type="checkbox" id="select_all_available" onchange="toggleAllAvailable()">
                            <span>可用权限</span>
                        </label>
                        <span class="xc_transfer-count" id="available_count">0</span>
                    </div>
                    <div class="xc_transfer-body" id="available_list">
                        <div style="text-align: center; padding: 40px; color: #9ca3af;">
                            <i class="fa fa-spinner fa-spin"></i> 加载中...
                        </div>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="xc_transfer-actions">
                    <button class="xc_transfer-btn" onclick="moveToSelected()" title="添加选中">
                        <i class="fa fa-angle-right"></i>
                    </button>
                    <button class="xc_transfer-btn" onclick="moveAllToSelected()" title="添加全部">
                        <i class="fa fa-angle-double-right"></i>
                    </button>
                    <button class="xc_transfer-btn" onclick="moveToAvailable()" title="移除选中">
                        <i class="fa fa-angle-left"></i>
                    </button>
                    <button class="xc_transfer-btn" onclick="moveAllToAvailable()" title="移除全部">
                        <i class="fa fa-angle-double-left"></i>
                    </button>
                </div>
                
                <!-- 已选权限 -->
                <div class="xc_transfer-panel">
                    <div class="xc_transfer-header">
                        <label>
                            <input type="checkbox" id="select_all_selected" onchange="toggleAllSelected()">
                            <span>已选权限</span>
                        </label>
                        <span class="xc_transfer-count" id="selected_count">0</span>
                    </div>
                    <div class="xc_transfer-body" id="selected_list">
                        <div class="xc_transfer-empty">
                            <i class="fa fa-inbox"></i>
                            <p>暂无已选权限</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="xc_modal-footer">
            <button class="xc_modal-btn" onclick="closePermissionModal()">取消</button>
            <button class="xc_modal-btn xc_modal-btn-primary" onclick="submitPermissionForm()">
                <span id="perm_submit_text">保存</span>
            </button>
        </div>
    </div>
</div>
{% endblock content %}

{% block javascripts %}
  {{ block.super }}
<script>
    let ele_top_loading = $("#top_loading");
    let ele_top_msg = $("#top_msg");

    function f_reload() {
        window.location.reload();
    }
    
    // ============ 弹窗功能 ============
    let currentHandle = 'add'; // 'add' 或 'edit'
    let currentUserId = '';
    let curIsPost = false;
    
    function openAddModal() {
        currentHandle = 'add';
        currentUserId = '';
        
        $('#modalTitle').text('添加用户');
        $('#input_username').val('').prop('disabled', false);
        $('#input_email').val('');
        $('#input_password').val('');
        $('#input_new_password').val('');
        $('#input_re_password').val('');
        $('#status_active').prop('checked', true);
        
        // 显示添加模式的密码框
        $('#password_group').show();
        $('#new_password_group').hide();
        $('#re_password_group').hide();
        
        $('#userModal').addClass('active');
    }
    
    function openEditModal(user_id) {
        currentHandle = 'edit';
        currentUserId = user_id;
        
        $('#modalTitle').text('编辑用户');
        
        // 加载用户数据
        ele_top_loading.show();
        $.ajax({
            url: '/user/openInfo',
            type: 'get',
            data: {id: user_id},
            dataType: 'json',
            success: function(res) {
                ele_top_loading.hide();
                
                if(res.code === 1000 && res.info) {
                    let user = res.info;
                    
                    $('#input_username').val(user.username).prop('disabled', true);
                    $('#input_email').val(user.email);
                    $('#input_new_password').val('');
                    $('#input_re_password').val('');
                    
                    if(user.is_active == 1 || user.is_active === true) {
                        $('#status_active').prop('checked', true);
                    } else {
                        $('#status_inactive').prop('checked', true);
                    }
                    
                    // 显示编辑模式的密码框
                    $('#password_group').hide();
                    $('#new_password_group').show();
                    $('#re_password_group').show();
                    
                    $('#userModal').addClass('active');
                } else {
                    myToast2025(res.msg || '用户不存在', 'error');
                }
            },
            error: function() {
                ele_top_loading.hide();
                myToast2025('加载失败，请稍后重试', 'error');
            }
        });
    }
    
    function closeUserModal() {
        $('#userModal').removeClass('active');
        currentUserId = '';
    }
    
    // 点击遮罩层关闭
    $('#userModal').click(function(e) {
        if (e.target === this) {
            closeUserModal();
        }
    });
    
    // ESC键关闭
    $(document).keydown(function(e) {
        if (e.keyCode === 27 && $('#userModal').hasClass('active')) {
            closeUserModal();
        }
    });
    
    function submitUserForm() {
        let username = $('#input_username').val().trim();
        let email = $('#input_email').val().trim();
        let is_active = $('input[name="is_active"]:checked').val();
        
        // 验证
        if(username === '') {
            myToast2025('请输入用户名', 'error');
            return false;
        }
        if(email === '') {
            myToast2025('请输入邮箱', 'error');
            return false;
        }
        
        let formData = {
            handle: currentHandle,
            username: username,
            email: email,
            is_active: is_active
        };
        
        if(currentHandle === 'add') {
            let password = $('#input_password').val().trim();
            if(password === '') {
                myToast2025('请输入密码', 'error');
                return false;
            }
            if(password.length < 6 || password.length > 16) {
                myToast2025('密码长度须为6-16位', 'error');
                return false;
            }
            formData.password = password;
        } else {
            formData.id = currentUserId;
            let new_password = $('#input_new_password').val().trim();
            let re_password = $('#input_re_password').val().trim();
            
            if(new_password !== '') {
                if(new_password.length < 6 || new_password.length > 16) {
                    myToast2025('密码长度须为6-16位', 'error');
                    return false;
                }
                if(new_password !== re_password) {
                    myToast2025('两次输入的密码不一致', 'error');
                    return false;
                }
                formData.new_password = new_password;
                formData.re_password = re_password;
            }
        }
        
        if(curIsPost) {
            myToast2025('正在提交中，请勿重复提交！', 'error', 500);
            return false;
        }
        curIsPost = true;
        
        $('#submit_text').text('提交中...');
        
        let handleUrl = currentHandle === 'add' ? '/user/openAdd' : '/user/openEdit';
        
        $.ajax({
            url: handleUrl,
            type: 'post',
            data: formData,
            dataType: 'json',
            error: function() {
                curIsPost = false;
                $('#submit_text').text('提交');
                myToast2025('网络异常，请确定网络正常！', 'error');
            },
            success: function(res) {
                curIsPost = false;
                $('#submit_text').text('提交');
                
                if(res.code === 1000) {
                    myToast2025(res.msg, 'success', 1000);
                    setTimeout(function() {
                        closeUserModal();
                        window.location.reload();
                    }, 1000);
                } else {
                    myToast2025(res.msg, 'error');
                }
            }
        });
    }

    function f_del(user_id){
        if(!confirm('确定要删除这个用户吗？')) {
            return;
        }
        
        ele_top_loading.show();
        $.ajax({
            url: '/user/openDel',
            type: "post",
            async: true,
            data: {"id":user_id},
            dataType: "json",
            timeout: 0,
            error: function () {
                ele_top_loading.hide();
                myToast2025("网络异常，请确定网络正常！","error");
            },
            success: function (res) {
                ele_top_loading.hide();
                if(1000 === res.code){
                    myToast2025(res.msg, "success", 1000);
                    setTimeout(function() {
                        window.location.reload();
                    }, 1000);
                }else{
                    myToast2025(res.msg,"error");
                }
            }
        });
    }
    
    function f_del(user_id){
        if(!confirm('确定要删除这个用户吗？')) {
            return;
        }
        ele_top_loading.show();
        $.ajax({
            url: '/user/openDel',
            type: "post",
            async: true,
            data: {"id":user_id},
            dataType: "json",
            timeout: 0,
            error: function () {
                ele_top_loading.hide();
                myToast2025("网络异常，请确定网络正常！","error");
            },
            success: function (res) {
                ele_top_loading.hide();
                if(1000 === res.code){
                    myToast2025(res.msg, "success", 1000);
                    setTimeout(function() {
                        window.location.reload();
                    }, 1000);
                }else{
                    myToast2025(res.msg,"error");
                }
            }
        });
    }
    
    // ============ 权限管理功能 ============
    let currentPermUserId = '';
    let curPermIsPost = false;
    let allPermissions = []; // 所有权限数据
    let availablePermissions = []; // 可用权限
    let selectedPermissions = []; // 已选权限
    
    function openPermissionModal(user_id, username) {
        currentPermUserId = user_id;
        $('#perm_username').val(username);
        $('#permissionModalTitle').text('编辑用户权限 - ' + username);
        $('#perm_search').val('');
        
        // 显示弹窗
        $('#permissionModal').addClass('active');
        
        // 加载权限列表
        loadUserPermissions(user_id);
    }
    
    function closePermissionModal() {
        $('#permissionModal').removeClass('active');
        currentPermUserId = '';
        allPermissions = [];
        availablePermissions = [];
        selectedPermissions = [];
    }
    
    // 点击遮罩层关闭
    $('#permissionModal').click(function(e) {
        if (e.target === this) {
            closePermissionModal();
        }
    });
    
    function loadUserPermissions(user_id) {
        $('#available_list').html('<div style="text-align: center; padding: 40px; color: #9ca3af;"><i class="fa fa-spinner fa-spin"></i> 加载中...</div>');
        $('#selected_list').html('<div class="xc_transfer-empty"><i class="fa fa-inbox"></i><p>暂无已选权限</p></div>');
        
        $.ajax({
            url: '/user/openGetPermissions',
            type: 'get',
            data: {user_id: user_id},
            dataType: 'json',
            success: function(res) {
                if(res.code === 1000) {
                    allPermissions = res.data.all_permissions;
                    let userPermIds = res.data.user_permissions;
                    
                    // 分离已选和可用权限
                    selectedPermissions = [];
                    availablePermissions = [];
                    
                    allPermissions.forEach(function(perm) {
                        if(userPermIds.indexOf(perm.id) !== -1) {
                            selectedPermissions.push(perm);
                        } else {
                            availablePermissions.push(perm);
                        }
                    });
                    
                    renderTransferLists();
                } else {
                    $('#available_list').html('<div style="text-align: center; padding: 40px; color: #ef4444;">' + res.msg + '</div>');
                }
            },
            error: function() {
                $('#available_list').html('<div style="text-align: center; padding: 40px; color: #ef4444;">加载失败，请稍后重试</div>');
            }
        });
    }
    
    function renderTransferLists() {
        let searchText = $('#perm_search').val().toLowerCase();
        
        // 过滤
        let filteredAvailable = availablePermissions;
        let filteredSelected = selectedPermissions;
        
        if(searchText) {
            filteredAvailable = availablePermissions.filter(function(p) {
                return p.name.toLowerCase().indexOf(searchText) !== -1 || 
                       p.codename.toLowerCase().indexOf(searchText) !== -1;
            });
            filteredSelected = selectedPermissions.filter(function(p) {
                return p.name.toLowerCase().indexOf(searchText) !== -1 || 
                       p.codename.toLowerCase().indexOf(searchText) !== -1;
            });
        }
        
        // 渲染可用权限
        let availableHtml = '';
        filteredAvailable.forEach(function(perm) {
            availableHtml += renderTransferItem(perm, 'available');
        });
        
        if(availableHtml === '') {
            availableHtml = '<div class="xc_transfer-empty"><i class="fa fa-inbox"></i><p>无匹配权限</p></div>';
        }
        $('#available_list').html(availableHtml);
        $('#available_count').text(filteredAvailable.length);
        
        // 渲染已选权限
        let selectedHtml = '';
        filteredSelected.forEach(function(perm) {
            selectedHtml += renderTransferItem(perm, 'selected');
        });
        
        if(selectedHtml === '') {
            selectedHtml = '<div class="xc_transfer-empty"><i class="fa fa-inbox"></i><p>暂无已选权限</p></div>';
        }
        $('#selected_list').html(selectedHtml);
        $('#selected_count').text(filteredSelected.length);
        
        // 重置全选状态
        $('#select_all_available').prop('checked', false);
        $('#select_all_selected').prop('checked', false);
    }
    
    function renderTransferItem(perm, type) {
        return '<div class="xc_transfer-item" onclick="toggleTransferItem(this, event)">' +
               '<input type="checkbox" class="transfer-checkbox" data-id="' + perm.id + '" data-type="' + type + '" onclick="event.stopPropagation()">' +
               '<div class="xc_transfer-item-content">' +
               '<div class="xc_transfer-item-name">' + perm.name + '<span class="xc_transfer-item-model">' + perm.content_type__model + '</span></div>' +
               '<div class="xc_transfer-item-code">' + perm.codename + '</div>' +
               '</div>' +
               '</div>';
    }
    
    function toggleTransferItem(item, event) {
        let checkbox = $(item).find('input[type="checkbox"]');
        checkbox.prop('checked', !checkbox.prop('checked'));
        
        if(checkbox.prop('checked')) {
            $(item).addClass('selected');
        } else {
            $(item).removeClass('selected');
        }
    }
    
    function toggleAllAvailable() {
        let checked = $('#select_all_available').prop('checked');
        $('#available_list .transfer-checkbox').prop('checked', checked);
        if(checked) {
            $('#available_list .xc_transfer-item').addClass('selected');
        } else {
            $('#available_list .xc_transfer-item').removeClass('selected');
        }
    }
    
    function toggleAllSelected() {
        let checked = $('#select_all_selected').prop('checked');
        $('#selected_list .transfer-checkbox').prop('checked', checked);
        if(checked) {
            $('#selected_list .xc_transfer-item').addClass('selected');
        } else {
            $('#selected_list .xc_transfer-item').removeClass('selected');
        }
    }
    
    function moveToSelected() {
        let checkedIds = [];
        $('#available_list .transfer-checkbox:checked').each(function() {
            checkedIds.push(parseInt($(this).data('id')));
        });
        
        if(checkedIds.length === 0) {
            myToast2025('请先选择要添加的权限', 'warning', 1000);
            return;
        }
        
        // 移动权限
        checkedIds.forEach(function(id) {
            let index = availablePermissions.findIndex(p => p.id === id);
            if(index !== -1) {
                selectedPermissions.push(availablePermissions[index]);
                availablePermissions.splice(index, 1);
            }
        });
        
        renderTransferLists();
    }
    
    function moveAllToSelected() {
        selectedPermissions = selectedPermissions.concat(availablePermissions);
        availablePermissions = [];
        renderTransferLists();
    }
    
    function moveToAvailable() {
        let checkedIds = [];
        $('#selected_list .transfer-checkbox:checked').each(function() {
            checkedIds.push(parseInt($(this).data('id')));
        });
        
        if(checkedIds.length === 0) {
            myToast2025('请先选择要移除的权限', 'warning', 1000);
            return;
        }
        
        // 移动权限
        checkedIds.forEach(function(id) {
            let index = selectedPermissions.findIndex(p => p.id === id);
            if(index !== -1) {
                availablePermissions.push(selectedPermissions[index]);
                selectedPermissions.splice(index, 1);
            }
        });
        
        renderTransferLists();
    }
    
    function moveAllToAvailable() {
        availablePermissions = availablePermissions.concat(selectedPermissions);
        selectedPermissions = [];
        renderTransferLists();
    }
    
    // 搜索功能
    $('#perm_search').on('input', function() {
        renderTransferLists();
    });
    
    function submitPermissionForm() {
        if(curPermIsPost) {
            myToast2025('正在提交中，请勿重复提交！', 'error', 500);
            return false;
        }
        
        // 收集已选权限ID
        let permissionIds = selectedPermissions.map(p => p.id);
        
        curPermIsPost = true;
        $('#perm_submit_text').text('保存中...');
        
        $.ajax({
            url: '/user/openSetPermissions',
            type: 'post',
            data: {
                user_id: currentPermUserId,
                permission_ids: permissionIds.join(',')
            },
            dataType: 'json',
            error: function() {
                curPermIsPost = false;
                $('#perm_submit_text').text('保存');
                myToast2025('网络异常，请确定网络正常！', 'error');
            },
            success: function(res) {
                curPermIsPost = false;
                $('#perm_submit_text').text('保存');
                
                if(res.code === 1000) {
                    myToast2025(res.msg, 'success', 1000);
                    setTimeout(function() {
                        closePermissionModal();
                    }, 1000);
                } else {
                    myToast2025(res.msg, 'error');
                }
            }
        });
    }
</script>
{% endblock javascripts %}
